<template>
  <div id="app">
    <!-- 头部 -->
    <Topbar :key="topbarKey"></Topbar>
    <!-- 导航 -->
    <Header @send1="accept"></Header>

    <router-view @updateTopBar="Refresh"></router-view>
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 登录框 -->
    <Iogin v-show="isSHowLoginModal"></Iogin>
    <!-- 提示框 -->
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Topbar from '@/components/TopBar.vue'
import Footer from '@/components/Footer.vue'
import Iogin from '@/components/Login.vue'
/* 记得导入axios 的插件 */
import axios from '@/request/request'
import Toast from '@/components/Toast.vue'
/* 按需导入 */
/* 导入辅助函数  */
import { mapActions, mapState } from 'vuex'
import { JingpinApi, RemenApi } from '@/request/api'

export default {
  name: 'HomeView',
  components: {
    Header,
    Topbar,
    Footer,
    Iogin,
    Toast
  },
  data() {
    return {
      topbarKey: 0
    }
  },
  methods: {
    ...mapActions({
      asyncChangeUserInfo: 'userinfo/asyncChangeUserInfo'
    }),
    Refresh() {
      this.topbarKey++
    },
    accept() {}
  },
  watch: {
    '$route.path': {
      handler(newVal, oldVal) {
        /* 当路由发生变化时，topbar重新加载 */
        let token = localStorage.getItem('x-auth-token')
        if (newVal != oldVal) {
          this.topbarKey++

          /*  console.log(this.topbarKey) */
        }
      }
    }
  },
  computed: {
    ...mapState({
      /* 属性  ：state =>state.模块名称  属性名 */
      isSHowLoginModal: (state) => state.showModal.isSHowLoginModal,
      isShowToast: (state) => state.showToast.isShowToast
    })
  },
  created() {
    /* 1服务器url地扯都一样，每个组件调用时都需要复制过去
         一旦接口地扯发生变化 ，所有调用了接口中的组件都需要修改
         改的地方越多，bug产生的更多
      2每次请求时都需要手动编写config携带token(多个组件携带代码重复)
      3优化then()写法   async和await              

            Promise的产生是为了解决回调地狱

      axios.get(url[,config])
    */
    // JingpinApi()
    //   .then((res) => {
    //     /*    console.log('res', res) /* 在network 中看请求地扯，响应结果  */
    //     // console.log(111) */
    //   })
    //   .then((err) => {
    //     /*     console.log(333) */
    //   })
    /*     RemenApi().then((res)=>{
        console.log('res',res)
      }) */
    console.log('配置值为：', process.env.VUE_APP_BASE_URL)
    console.log('配置值为：', process.env.VUE_APP_STATE_URL)
    console.log(process.env)
  },
  mounted() {
    // console.log(222)
  }
}
</script>
<style lang="less">
/* .header {
  height: 50px;
  background-color: #333;
} */
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
